import React, { Component } from 'react';
class Todo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                { done: true, title: "学习vue" },
                { done: false, title: "学习React" }
            ]
            // 定义清单list done 是否完成 title是标题文字
        }
    }

    inputSel(item){
        let  list = this.state.list;//获取到列表
        let  ind = list.indexOf(item);//获取item在列表中的下标
        list[ind].done = !list[ind].done;//让item的done值取反
        this.setState({list}) //更新list;
    }
    addItem(e){
        if(e.keyCode!=13){return};//不是enter键 不执行
        let list = this.state.list; //获取到列表
        list.unshift({done:false,title:e.target.value}); //新数据添加到列表
        this.setState({list})//更新list
        // localStorage.setItem("listName",JSON.stringify(this.state.list))
        e.target.value = '';//清空文本框数据
    }
    delItem(item){
        let  list = this.state.list;//获取到列表
        let  ind = list.indexOf(item);//获取item在列表中的下标 
        list.splice(ind,1);
        // localStorage.setItem("listName",JSON.stringify(this.state.list))
        this.setState({list});
    }
    render() {
        return (
            <div>
                <h1>todolist</h1>
                <input type="text" placeholder="添加计划" onKeyUp={e=>this.addItem(e)}/>
                <h3>未完成 {this.state.list.filter(item=>!item.done).length}</h3>
                <div className="list">
                    {
                        this.state.list.filter(item=>!item.done).map(item => 
                        <div key={item.title}>
                            <input type="checkbox" checked={item.done} onChange={this.inputSel.bind(this,item)} />
                            <span className="item-content">{item.title}</span> 
                            <button onClick={this.delItem.bind(this,item)}>×</button>
                        </div>)
                        
                    }
                    {/* 遍历list数据，生成html节点（input是否完成 item-content标题内容） */}
                </div>
                <h3>已完成 {this.state.list.filter(item=>item.done).length}</h3>
                <div className="list">
                    {
                        this.state.list.filter(item=>item.done).map(item => 
                        <div key={item.title}>
                            <input type="checkbox" checked={item.done} onChange={this.inputSel.bind(this,item)} />
                            <span className="item-content">{item.title}</span> 
                            <button onClick={this.delItem.bind(this,item)}>×</button>
                        </div>)
                    }
                    {/* 遍历list数据，生成html节点（input是否完成 item-content标题内容） */}
                </div>
            </div>
        );
    }
    //存储的代码：都在下方
    componentDidMount(){
        var str = localStorage.getItem("list")||"[]";
        //获取本地存储的数据的数据  取不到用“[]”
        var list = JSON.parse(str);//转成js对象
        this.setState({list}) //更新list
    }
    componentDidUpdate(prevProps,prevState){
        localStorage.setItem("list",JSON.stringify(this.state.list))
        //当数据更新的时候，把数据转换为字符串  存储
    }
}

export default Todo;